<template>
  <div class="asset-market-container">
    <n-card class="market-card">
      <template #header>
        <div class="card-header">
          <h1>素材市场</h1>
          <div class="header-actions">
            <n-button type="primary" @click="goToUpload">
              <template #icon><n-icon><CloudUploadOutline /></n-icon></template>
              上传素材
            </n-button>
            <n-button @click="goBack">
              <template #icon><n-icon><ArrowBackOutline /></n-icon></template>
              返回
            </n-button>
          </div>
        </div>
      </template>
      
      <div class="market-content">
        <div class="search-filters">
          <n-input-group>
            <n-input 
              v-model:value="searchQuery" 
              placeholder="搜索素材..." 
              clearable
              @keydown.enter="searchAssets"
            />
            <n-button type="primary" @click="searchAssets">
              <template #icon><n-icon><SearchOutline /></n-icon></template>
              搜索
            </n-button>
          </n-input-group>
          
          <div class="filter-section">
            <n-space vertical>
              <n-tabs v-model:value="currentTab" type="line" animated>
                <n-tab-pane name="all" tab="全部素材" />
                <n-tab-pane name="character" tab="角色素材" />
                <n-tab-pane name="scene" tab="场景素材" />
                <n-tab-pane name="prop" tab="道具素材" />
                <n-tab-pane name="audio" tab="音频素材" />
                <n-tab-pane name="animation" tab="动画素材" />
              </n-tabs>
              
              <n-space>
                <n-select 
                  v-model:value="filters.category" 
                  placeholder="子分类" 
                  :options="categoryOptions"
                  clearable
                  style="width: 150px;"
                />
                <n-select 
                  v-model:value="filters.sortBy" 
                  placeholder="排序方式" 
                  :options="sortOptions"
                  style="width: 150px;"
                />
                <n-select 
                  v-model:value="filters.timeRange" 
                  placeholder="时间范围" 
                  :options="timeRangeOptions"
                  clearable
                  style="width: 150px;"
                />
                <n-switch v-model:value="filters.onlyFree">
                  <template #checked>仅免费</template>
                  <template #unchecked>全部</template>
                </n-switch>
              </n-space>
              
              <n-space>
                <n-tag 
                  v-for="tag in activeTags" 
                  :key="tag.key" 
                  closable 
                  @close="removeFilter(tag.key)"
                >
                  {{ tag.label }}
                </n-tag>
                <n-button text size="small" v-if="activeTags.length > 0" @click="clearFilters">
                  清除全部
                </n-button>
              </n-space>
            </n-space>
          </div>
        </div>
        
        <n-divider />
        
        <div class="featured-section" v-if="currentTab === 'all' && !searchQuery && !hasActiveFilters">
          <div class="section-header">
            <h2>精选素材</h2>
            <n-button text @click="viewMoreFeatured">查看更多</n-button>
          </div>
          
          <div class="featured-grid">
            <n-card
              v-for="asset in featuredAssets"
              :key="asset.id"
              class="asset-card featured"
              hoverable
              @click="showAssetDetail(asset)"
            >
              <div class="asset-thumbnail">
                <img :src="asset.thumbnail" :alt="asset.name" />
                <div class="asset-badges">
                  <n-tag v-if="asset.price === 0" type="success" size="small">免费</n-tag>
                  <n-tag v-else type="warning" size="small">{{ asset.price }} 积分</n-tag>
                  <n-tag v-if="asset.isNew" type="info" size="small">新品</n-tag>
                </div>
              </div>
              <div class="asset-info">
                <h3>{{ asset.name }}</h3>
                <div class="asset-meta">
                  <div class="asset-creator">
                    <n-avatar :src="asset.creatorAvatar" round size="small" />
                    <span>{{ asset.creator }}</span>
                  </div>
                  <div class="asset-rating">
                    <n-rate :value="asset.rating" readonly size="small" />
                    <span>{{ asset.rating.toFixed(1) }}</span>
                  </div>
                </div>
              </div>
            </n-card>
          </div>
        </div>
        
        <div class="assets-section">
          <div class="section-header">
            <h2>{{ sectionTitle }}</h2>
            <span>共 {{ filteredAssets.length }} 个素材</span>
          </div>
          
          <div v-if="loading" class="loading-container">
            <n-spin size="large" />
            <p>正在加载素材...</p>
          </div>
          
          <div v-else-if="filteredAssets.length === 0" class="empty-container">
            <n-empty description="未找到符合条件的素材">
              <template #extra>
                <n-button @click="clearFilters">清除筛选条件</n-button>
              </template>
            </n-empty>
          </div>
          
          <div v-else class="assets-grid">
            <n-card
              v-for="asset in paginatedAssets"
              :key="asset.id"
              class="asset-card"
              hoverable
              @click="showAssetDetail(asset)"
            >
              <div class="asset-thumbnail">
                <img :src="asset.thumbnail" :alt="asset.name" />
                <div class="asset-badges">
                  <n-tag v-if="asset.price === 0" type="success" size="small">免费</n-tag>
                  <n-tag v-else type="warning" size="small">{{ asset.price }} 积分</n-tag>
                  <n-tag v-if="asset.isNew" type="info" size="small">新品</n-tag>
                </div>
                <div class="asset-type-badge" :class="`type-${asset.type}`">
                  {{ getAssetTypeLabel(asset.type) }}
                </div>
              </div>
              <div class="asset-info">
                <h3>{{ asset.name }}</h3>
                <div class="asset-meta">
                  <div class="asset-creator">
                    <n-avatar :src="asset.creatorAvatar" round size="small" />
                    <span>{{ asset.creator }}</span>
                  </div>
                  <div class="asset-rating">
                    <n-rate :value="asset.rating" readonly size="small" />
                    <span>{{ asset.rating.toFixed(1) }}</span>
                  </div>
                </div>
                <div class="asset-tags">
                  <n-tag v-for="tag in asset.tags.slice(0, 3)" :key="tag" size="small">{{ tag }}</n-tag>
                  <span v-if="asset.tags.length > 3">+{{ asset.tags.length - 3 }}</span>
                </div>
              </div>
            </n-card>
          </div>
          
          <n-pagination 
            v-if="filteredAssets.length > 0"
            v-model:page="currentPage"
            :page-count="totalPages"
            :page-slot="5"
            show-size-picker
            :page-sizes="[12, 24, 48]"
            v-model:page-size="pageSize"
          />
        </div>
        
        <div class="asset-packs-section" v-if="currentTab === 'all' && !searchQuery && !hasActiveFilters">
          <div class="section-header">
            <h2>素材包</h2>
            <n-button text @click="viewAllPacks">查看全部</n-button>
          </div>
          
          <div class="packs-grid">
            <n-card
              v-for="pack in assetPacks"
              :key="pack.id"
              class="pack-card"
              hoverable
              @click="showPackDetail(pack)"
            >
              <div class="pack-thumbnail">
                <img :src="pack.thumbnail" :alt="pack.name" />
                <div class="pack-badges">
                  <n-tag v-if="pack.discount > 0" type="error" size="small">{{ pack.discount }}% 折扣</n-tag>
                  <n-tag v-if="pack.isNew" type="info" size="small">新品</n-tag>
                </div>
              </div>
              <div class="pack-info">
                <h3>{{ pack.name }}</h3>
                <p class="pack-description">{{ pack.description }}</p>
                <div class="pack-meta">
                  <div class="pack-price">
                    <template v-if="pack.discount > 0">
                      <span class="original-price">{{ pack.originalPrice }} 积分</span>
                      <span class="discount-price">{{ pack.price }} 积分</span>
                    </template>
                    <template v-else>
                      <span>{{ pack.price }} 积分</span>
                    </template>
                  </div>
                  <div class="pack-count">
                    <n-icon><CubeOutline /></n-icon>
                    <span>{{ pack.assetCount }} 个素材</span>
                  </div>
                </div>
              </div>
            </n-card>
          </div>
        </div>
      </div>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import {
  NCard,
  NButton,
  NIcon,
  NInput,
  NInputGroup,
  NDivider,
  NSpace,
  NTabs,
  NTabPane,
  NSelect,
  NSwitch,
  NTag,
  NEmpty,
  NSpin,
  NPagination,
  NAvatar,
  NRate
} from 'naive-ui'
import {
  SearchOutline,
  CloudUploadOutline,
  ArrowBackOutline,
  CubeOutline
} from '@vicons/ionicons5'

// 类型定义
interface AssetTag {
  key: string
  label: string
}

interface Asset {
  id: string
  name: string
  type: string
  thumbnail: string
  price: number
  rating: number
  creator: string
  creatorAvatar: string
  tags: string[]
  isNew: boolean
  downloadCount: number
  createdAt: Date
  description: string
  category: string
}

interface AssetPack {
  id: string
  name: string
  thumbnail: string
  description: string
  price: number
  originalPrice: number
  discount: number
  assetCount: number
  isNew: boolean
}

// 路由和消息
const router = useRouter()
const message = useMessage()

// 搜索和筛选
const searchQuery = ref('')
const currentTab = ref('all')
const loading = ref(false)
const filters = reactive({
  category: null,
  sortBy: 'newest',
  timeRange: null,
  onlyFree: false
})

// 分页
const currentPage = ref(1)
const pageSize = ref(24)
const totalPages = computed(() => Math.ceil(filteredAssets.value.length / pageSize.value))
const paginatedAssets = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredAssets.value.slice(start, end)
})

// 选项数据
const categoryOptions = computed(() => {
  switch (currentTab.value) {
    case 'character':
      return [
        { label: '人物角色', value: 'human' },
        { label: '动物角色', value: 'animal' },
        { label: '幻想角色', value: 'fantasy' },
        { label: '机械角色', value: 'mechanical' }
      ]
    case 'scene':
      return [
        { label: '自然场景', value: 'nature' },
        { label: '城市场景', value: 'city' },
        { label: '室内场景', value: 'interior' },
        { label: '幻想场景', value: 'fantasy' }
      ]
    case 'prop':
      return [
        { label: '家具道具', value: 'furniture' },
        { label: '武器道具', value: 'weapon' },
        { label: '生活道具', value: 'daily' },
        { label: '装饰道具', value: 'decoration' }
      ]
    case 'audio':
      return [
        { label: '背景音乐', value: 'bgm' },
        { label: '音效', value: 'sfx' },
        { label: '对白配音', value: 'voice' },
        { label: '环境音', value: 'ambient' }
      ]
    case 'animation':
      return [
        { label: '行走动画', value: 'walk' },
        { label: '表情动画', value: 'expression' },
        { label: '特效动画', value: 'effect' },
        { label: '转场动画', value: 'transition' }
      ]
    default:
      return [
        { label: '角色', value: 'character' },
        { label: '场景', value: 'scene' },
        { label: '道具', value: 'prop' },
        { label: '音频', value: 'audio' },
        { label: '动画', value: 'animation' }
      ]
  }
})

const sortOptions = [
  { label: '最新发布', value: 'newest' },
  { label: '最受欢迎', value: 'popular' },
  { label: '评分最高', value: 'rating' },
  { label: '价格从低到高', value: 'price_asc' },
  { label: '价格从高到低', value: 'price_desc' }
]

const timeRangeOptions = [
  { label: '本周', value: 'week' },
  { label: '本月', value: 'month' },
  { label: '今年', value: 'year' }
]

// 活跃的筛选标签
const activeTags = computed(() => {
  const tags: AssetTag[] = []
  
  if (searchQuery.value) {
    tags.push({ key: 'search', label: `搜索: ${searchQuery.value}` })
  }
  
  if (currentTab.value !== 'all') {
    tags.push({ key: 'tab', label: getTabLabel(currentTab.value) })
  }
  
  if (filters.category) {
    const categoryOption = categoryOptions.value.find(opt => opt.value === filters.category)
    if (categoryOption) {
      tags.push({ key: 'category', label: `分类: ${categoryOption.label}` })
    }
  }
  
  if (filters.timeRange) {
    const timeOption = timeRangeOptions.find(opt => opt.value === filters.timeRange)
    if (timeOption) {
      tags.push({ key: 'time', label: `时间: ${timeOption.label}` })
    }
  }
  
  if (filters.onlyFree) {
    tags.push({ key: 'free', label: '仅免费素材' })
  }
  
  return tags
})

const hasActiveFilters = computed(() => activeTags.value.length > 0)

// 标题
const sectionTitle = computed(() => {
  if (searchQuery.value) {
    return `搜索结果: "${searchQuery.value}"`
  }
  
  if (currentTab.value !== 'all') {
    return getTabLabel(currentTab.value)
  }
  
  return '全部素材'
})

// 模拟数据
const allAssets = ref<Asset[]>([])
const featuredAssets = ref<Asset[]>([])
const assetPacks = ref<AssetPack[]>([])

// 筛选资产
const filteredAssets = computed(() => {
  let result = [...allAssets.value]
  
  // 根据标签筛选
  if (currentTab.value !== 'all') {
    result = result.filter(asset => asset.type === currentTab.value)
  }
  
  // 根据搜索关键词筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(asset => 
      asset.name.toLowerCase().includes(query) || 
      asset.description.toLowerCase().includes(query) ||
      asset.tags.some(tag => tag.toLowerCase().includes(query))
    )
  }
  
  // 根据分类筛选
  if (filters.category) {
    result = result.filter(asset => asset.category === filters.category)
  }
  
  // 根据价格筛选
  if (filters.onlyFree) {
    result = result.filter(asset => asset.price === 0)
  }
  
  // 根据时间筛选
  if (filters.timeRange) {
    const now = new Date()
    let startDate = new Date()
    
    switch (filters.timeRange) {
      case 'week':
        startDate.setDate(now.getDate() - 7)
        break
      case 'month':
        startDate.setMonth(now.getMonth() - 1)
        break
      case 'year':
        startDate.setFullYear(now.getFullYear() - 1)
        break
    }
    
    result = result.filter(asset => asset.createdAt >= startDate)
  }
  
  // 排序
  switch (filters.sortBy) {
    case 'newest':
      result.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
      break
    case 'popular':
      result.sort((a, b) => b.downloadCount - a.downloadCount)
      break
    case 'rating':
      result.sort((a, b) => b.rating - a.rating)
      break
    case 'price_asc':
      result.sort((a, b) => a.price - b.price)
      break
    case 'price_desc':
      result.sort((a, b) => b.price - a.price)
      break
  }
  
  return result
})

// 工具函数
function getTabLabel(tab: string): string {
  switch (tab) {
    case 'character': return '角色素材'
    case 'scene': return '场景素材'
    case 'prop': return '道具素材'
    case 'audio': return '音频素材'
    case 'animation': return '动画素材'
    default: return '全部素材'
  }
}

function getAssetTypeLabel(type: string): string {
  return getTabLabel(type)
}

// 操作函数
function searchAssets() {
  currentPage.value = 1
  loading.value = true
  
  // 模拟API请求延迟
  setTimeout(() => {
    loading.value = false
  }, 500)
}

function removeFilter(key: string) {
  if (key === 'search') {
    searchQuery.value = ''
  } else if (key === 'tab') {
    currentTab.value = 'all'
  } else if (key === 'category') {
    filters.category = null
  } else if (key === 'time') {
    filters.timeRange = null
  } else if (key === 'free') {
    filters.onlyFree = false
  }
  
  // 重置到第一页
  currentPage.value = 1
}

function clearFilters() {
  searchQuery.value = ''
  currentTab.value = 'all'
  filters.category = null
  filters.timeRange = null
  filters.onlyFree = false
  currentPage.value = 1
}

function showAssetDetail(asset: Asset) {
  router.push(`/asset-detail/${asset.id}`)
}

function showPackDetail(pack: AssetPack) {
  router.push(`/asset-pack/${pack.id}`)
}

function viewMoreFeatured() {
  filters.sortBy = 'popular'
  currentTab.value = 'all'
}

function viewAllPacks() {
  router.push('/asset-packs')
}

function goToUpload() {
  router.push('/creator-upload')
}

function goBack() {
  router.back()
}

// 生命周期钩子
onMounted(() => {
  loading.value = true
  
  // 模拟API请求
  setTimeout(() => {
    // 生成模拟数据
    generateMockData()
    loading.value = false
  }, 500)
})

// 生成模拟数据
function generateMockData() {
  const assetTypes = ['character', 'scene', 'prop', 'audio', 'animation']
  const categories = {
    character: ['human', 'animal', 'fantasy', 'mechanical'],
    scene: ['nature', 'city', 'interior', 'fantasy'],
    prop: ['furniture', 'weapon', 'daily', 'decoration'],
    audio: ['bgm', 'sfx', 'voice', 'ambient'],
    animation: ['walk', 'expression', 'effect', 'transition']
  }
  
  const tagsList = [
    '中国风', '现代', '古风', '科幻', '卡通', '写实', '动漫',
    '2D', '3D', '像素', '水彩', '插画', '剪影', '简约'
  ]
  
  // 生成素材
  const assets: Asset[] = []
  
  for (let i = 1; i <= 100; i++) {
    const type = assetTypes[Math.floor(Math.random() * assetTypes.length)]
    const categoryList = categories[type as keyof typeof categories]
    const category = categoryList[Math.floor(Math.random() * categoryList.length)]
    
    // 随机生成3-5个标签
    const tagCount = Math.floor(Math.random() * 3) + 3
    const tags: string[] = []
    for (let j = 0; j < tagCount; j++) {
      const tag = tagsList[Math.floor(Math.random() * tagsList.length)]
      if (!tags.includes(tag)) {
        tags.push(tag)
      }
    }
    
    // 随机生成创建日期（过去1年内）
    const createdAt = new Date()
    createdAt.setDate(createdAt.getDate() - Math.floor(Math.random() * 365))
    
    // 随机生成价格（30%概率免费）
    const isFree = Math.random() < 0.3
    const price = isFree ? 0 : Math.floor(Math.random() * 500) + 50
    
    // 随机生成评分（3-5分）
    const rating = Math.random() * 2 + 3
    
    // 随机生成下载次数
    const downloadCount = Math.floor(Math.random() * 10000)
    
    // 是否为新品（过去7天上传）
    const isNew = (new Date().getTime() - createdAt.getTime()) < 7 * 24 * 60 * 60 * 1000
    
    assets.push({
      id: `asset-${i}`,
      name: `${getAssetTypeLabel(type)}示例 ${i}`,
      type,
      thumbnail: `https://picsum.photos/id/${i + 100}/300/200`,
      price,
      rating,
      creator: `创作者${Math.floor(i / 10) + 1}`,
      creatorAvatar: `https://i.pravatar.cc/100?img=${Math.floor(i / 10) + 1}`,
      tags,
      isNew,
      downloadCount,
      createdAt,
      description: `这是一个${getAssetTypeLabel(type)}示例，适用于各种创作场景。`,
      category
    })
  }
  
  allAssets.value = assets
  
  // 生成精选素材（评分最高的8个）
  featuredAssets.value = [...assets]
    .sort((a, b) => b.rating - a.rating)
    .slice(0, 8)
  
  // 生成素材包
  const packs: AssetPack[] = []
  
  for (let i = 1; i <= 4; i++) {
    const hasDiscount = Math.random() < 0.5
    const originalPrice = Math.floor(Math.random() * 2000) + 1000
    const discount = hasDiscount ? Math.floor(Math.random() * 5) * 10 + 10 : 0
    const price = hasDiscount ? Math.floor(originalPrice * (1 - discount / 100)) : originalPrice
    
    packs.push({
      id: `pack-${i}`,
      name: `素材包示例 ${i}`,
      thumbnail: `https://picsum.photos/id/${i + 200}/300/200`,
      description: '这个素材包包含多种高质量素材，适用于各种创作场景。',
      price,
      originalPrice,
      discount,
      assetCount: Math.floor(Math.random() * 50) + 10,
      isNew: Math.random() < 0.25
    })
  }
  
  assetPacks.value = packs
}
</script>

<style lang="scss" scoped>
.asset-market-container {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
  
  .market-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 500;
      }
      
      .header-actions {
        display: flex;
        gap: 12px;
      }
    }
  }
  
  .market-content {
    .search-filters {
      margin-bottom: 20px;
      
      .n-input-group {
        max-width: 600px;
        margin-bottom: 16px;
      }
      
      .filter-section {
        margin-top: 16px;
      }
    }
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      
      h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 500;
      }
    }
    
    .featured-section {
      margin-bottom: 30px;
      
      .featured-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
      }
    }
    
    .assets-section {
      margin-bottom: 30px;
      
      .loading-container, .empty-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 0;
        
        p {
          margin-top: 16px;
          color: var(--text-color-secondary);
        }
      }
      
      .assets-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
      }
      
      .n-pagination {
        display: flex;
        justify-content: center;
        margin-top: 24px;
      }
    }
    
    .asset-packs-section {
      margin-top: 40px;
      
      .packs-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
      }
    }
    
    .asset-card {
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
      
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
      
      &.featured {
        .asset-thumbnail {
          height: 180px;
        }
      }
      
      .asset-thumbnail {
        position: relative;
        height: 160px;
        overflow: hidden;
        border-radius: 3px;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s;
        }
        
        .asset-badges {
          position: absolute;
          top: 8px;
          right: 8px;
          display: flex;
          flex-direction: column;
          gap: 4px;
          
          .n-tag {
            backdrop-filter: blur(4px);
          }
        }
        
        .asset-type-badge {
          position: absolute;
          bottom: 8px;
          left: 8px;
          padding: 2px 8px;
          border-radius: 4px;
          font-size: 12px;
          color: white;
          background-color: rgba(0, 0, 0, 0.6);
          backdrop-filter: blur(4px);
          
          &.type-character {
            background-color: rgba(64, 158, 255, 0.8);
          }
          
          &.type-scene {
            background-color: rgba(103, 194, 58, 0.8);
          }
          
          &.type-prop {
            background-color: rgba(230, 162, 60, 0.8);
          }
          
          &.type-audio {
            background-color: rgba(144, 147, 153, 0.8);
          }
          
          &.type-animation {
            background-color: rgba(145, 71, 255, 0.8);
          }
        }
      }
      
      .asset-info {
        padding: 12px 0 0;
        
        h3 {
          margin: 0 0 8px;
          font-size: 16px;
          font-weight: 500;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        
        .asset-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;
          
          .asset-creator {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: var(--text-color-secondary);
            
            .n-avatar {
              flex-shrink: 0;
            }
            
            span {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          
          .asset-rating {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            color: var(--text-color-secondary);
          }
        }
        
        .asset-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 4px;
          
          .n-tag {
            margin-right: 4px;
          }
          
          span {
            font-size: 12px;
            color: var(--text-color-secondary);
          }
        }
      }
    }
    
    .pack-card {
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
      
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
      
      .pack-thumbnail {
        position: relative;
        height: 180px;
        overflow: hidden;
        border-radius: 3px;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .pack-badges {
          position: absolute;
          top: 8px;
          right: 8px;
          display: flex;
          flex-direction: column;
          gap: 4px;
        }
      }
      
      .pack-info {
        padding: 12px 0 0;
        
        h3 {
          margin: 0 0 8px;
          font-size: 16px;
          font-weight: 500;
        }
        
        .pack-description {
          margin: 0 0 12px;
          font-size: 14px;
          color: var(--text-color-secondary);
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        
        .pack-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .pack-price {
            font-weight: 500;
            
            .original-price {
              text-decoration: line-through;
              color: var(--text-color-secondary);
              font-size: 13px;
              margin-right: 6px;
            }
            
            .discount-price {
              color: var(--error-color);
            }
          }
          
          .pack-count {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            color: var(--text-color-secondary);
          }
        }
      }
    }
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .asset-market-container {
    padding: 12px;
    
    .market-content {
      .featured-grid,
      .assets-grid,
      .packs-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      }
    }
  }
}

@media (max-width: 480px) {
  .asset-market-container {
    padding: 8px;
    
    .card-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      
      .header-actions {
        width: 100%;
        justify-content: space-between;
      }
    }
    
    .market-content {
      .featured-grid,
      .assets-grid,
      .packs-grid {
        grid-template-columns: 1fr;
      }
    }
  }
}
</style> 